<template>
  <div>
    <el-card>
      <el-row :gutter="4">
        <el-form
          :inline="true"
          label-position="left"
          class="demo-form-inline"
          label-width="100px"
        >
          <el-form-item>
            <el-input
              v-model="searchDto.keywords"
              placeholder="请输入关键字"
              style="width:250px"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" type="primary" @click="clear">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <page-table
        ref="multipleSelection"
        :page-data="pageData"
        :loading="loading"
        :do-get-page-data="getPageData"
      >
        <el-table-column
          label="编号"
          align="center"
          type="index"
          width="60px"
        ></el-table-column>
        <el-table-column
          prop="letterTopic"
          label="信件主题"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="letterType"
          label="信件类型"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.letterType | keyText("LETTER_TYPE1") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="letterTime"
          label="来信时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="回复状态"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <sz-badge
              :value="scope.row.status == 0 ?'未回复':'已回复'"
              :type="scope.row.status == 0 ?'warning':'success'"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="详情" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-view"
                @click="view(scope.row)"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="回复" placement="top" v-if="scope.row.status== 0">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-s-promotion"
                @click="reply(scope.row)"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </page-table>
      <el-dialog :visible.sync="replyShow" v-if="replyShow" title="回复信件:" width="700px" @close="closeReply">
        <el-form ref="form" :model="currentForm" :rules="replyRule" label-suffix=":" label-width="auto">
          <el-form-item label="回复内容" prop="content">
            <el-input
              type="textarea"
              :autosize="{minRows:4}"
              v-model="currentForm.content"
              placeholder="请输入回复内容"
            />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button type="primary" @click="handleReply">确定</el-button>
          <el-button @click="replyShow=false">取消</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="showDetail" v-if="showDetail" title="信件详情">
        <el-descriptions :column="2" border :label-style="{'width':'100px','text-align':'center'}">
          <el-descriptions-item label="信件主题" :span="2">{{ formInfo.letterTopic }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ formInfo.contactName }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ formInfo.contactTel }}</el-descriptions-item>
          <el-descriptions-item label="来信时间">
            {{ formInfo.letterTime }}
          </el-descriptions-item>
          <el-descriptions-item label="图片信息">
            <el-image
              style="width:100px;height: 100px"
              :src="getImage(formInfo.letterUrl)"
              :preview-src-list="[getImage(formInfo.letterUrl)]"
            />
          </el-descriptions-item>
          <el-descriptions-item label="来信内容" :span="2">
            {{ formInfo.content }}
          </el-descriptions-item>
          <el-descriptions-item label="回复内容" :span="2" v-if="formInfo.replyContent">
            {{ formInfo.replyContent }}
          </el-descriptions-item>
          <el-descriptions-item label="回复时间" v-if="formInfo.replyTime">
            {{ formInfo.replyTime }}
          </el-descriptions-item>
          <el-descriptions-item label="回复人" v-if="formInfo.replyOrganizeName">
            {{ formInfo.replyOrganizeName }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'Mailbox',
  data() {
    return {
      pageData: {},
      replyShow: false,
      showDetail: false,
      loading: false,
      searchDto: {
        keywords: null
      },
      currentForm: {
        letterId: null,
        content: null
      },
      formInfo: {},
      replyRule: {
        content: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
      }
    }
  },
  methods: {
    getImage(url) {
      return window.api.image + '/' + url
    },
    handleReply() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let para = {
            letterId: this.currentForm.letterId,
            body: { content: this.currentForm.content }
          }
          this.API.addReply(para).then(() => {
            this.replyShow = false
            this.success('回复成功')
            this.getPageData()
            this.closeReply()
          })
        }
      })
    },
    closeReply() {
      this.currentForm = {
        letterId: null,
        content: null
      }
    },
    reply({ id }) {
      this.currentForm.letterId = id
      this.replyShow = true
    },
    view({ id }) {
      this.API.getLetterById({ id }).then(res => {
        this.formInfo = res.data
        this.showDetail = true
        console.log(this.formInfo)
      })
    },
    search() {
      this.getPageData();
    },

    clear() {
      this.searchDto = { keywords: null }
      this.getPageData();
    },

    getPageData(val) {
      let tem = Object.assign(this.searchDto, val);
      this.API.getReplyPageList(tem).then(ret => {
        this.pageData = ret.data;
      });
    }
  },
  created() {
    this.getPageData();
  },
}
</script>
<style scoped lang="scss"></style>
